<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="可参与活动" name="first">
        <div class="traffic-box">
          <h1>【限时抢购9.9午餐】邀您报名</h1>
          <p>如果你无法间接的表达你的想法，那只能说明你还不够了解他</p>
          <el-button size="mini">我要参见</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已参与活动" name="second">
        <div class="traffic-box">
          <h1>【限时抢购--7折午餐】邀您报名</h1>
          <p>如果你无法间接的表达你的想法，那只能说明你还不够了解他</p>
          <el-button size="mini">我要参见</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        activeName: 'first'
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .traffic-box {
    width: 224px;
    height: 167px;
    border: 1px solid #ccc;
    h1 {
      font-size: 13px;
      font-weight: 400;
      text-align: center;
      line-height: 40px;
    }
    p {
      font-size: 12px;
      width: 200px;
      height: auto;
      margin: 0 auto;
    }
    .el-button {
      float: right;
      margin-top: 50px;
      margin-right: 20px;
    }
  }
</style>
